<template>
    <div class="wrap">
        <!--  顶部蓝色背景开始 -->

        <!--<section class="background"></section>-->
       
        <!--  顶部蓝色背景结束 -->

       
        <!-- 第一个区域 主要信息 开始  -->
       
        <section class="main" v-for='k in res.info'>
            <div class="main-title">
                <img :src="srcImg" alt="" />
                <h1>
                     {{k.name}}
                </h1>
                <p>
                    <span> {{k.sex_descr}}</span>
                    <span v-if='k.ethnic_grp'> {{k.ethnic_grp}}</span>
                    <span> {{k.birthdate | retsetTime}}</span>
                </p>
                <p>
                    <span> {{k.busn_mobile}}</span>
                    <span> {{k.email_addr}}</span>
                </p> 
            </div>
            <div class="main-content">
                <p><span>职位</span><span> {{k.position_desc}}</span></p>
                <p><span>所在部门</span><span> {{k.dept_descr}}</span></p>
                <p><span>婚姻状况</span><span> {{k.mar_desc}}</span></p> 
                <p><span>籍贯</span><span> {{k.native_place_chn}}</span></p>
                <p><span>出生地</span><span> {{k.birthplace}}</span></p>
                <p><span>最高学历</span><span> {{k.highest_edu}}</span></p>
                <p><span>最高学位</span><span> {{k.highest_deg}}</span></p>
                <p><span>毕业院校</span><span> {{k.school_descr}}</span></p>
                <p><span>专业</span><span> {{k.major_descr}}</span></p>
            </div>


        </section>
       
        <!-- 第一个区域 主要信息 结束  -->



        <!-- 第二个区域 教育信息开始 -->

        <section class="education">
            <h2 class="education-title">
                教育信息
            </h2>
            <div class="education-content">
              <ul>
                <template v-if="res.edu && res.edu.length>0">
                    <li  v-for='k in res.edu'>
                      <h2>{{k.end_dt | retsetTime}}毕业于</h2>
                      <p>{{k.school_descr}}</p>
                      <p>
                        <span>{{k.major_descr}}</span>
                        <span>{{k.education}}</span>
                        <span>{{k.edu_degree}}</span>
                        <span>{{k.educ_type}}</span>
                      </p>
                    </li>
                </template>

                <li v-else>
                    <span style="margin-left: -0.44rem;">-</span>
                </li>
              </ul> 
            </div>

           
        </section>

        <!-- 第二个区域 教育信息结束 -->




        <!-- 第三个区域 工作经历开始 -->
        
        <section class="work">
            <h2 class="work-title">
                工作经历
            </h2>
            <div class="work-content">
              <ul>
                <template v-if="res.work && res.work.length>0">
                    <li  v-for='k in res.work'>
                      <h2>{{k.start_dt | retsetTime}} <span v-if="k.end_dt && k.end_dt.trim()">~ {{k.end_dt | retsetTime}}</span></h2>
                      <p>{{k.employer}}</p>
                      <p>
                        <span v-if='k.maior_duty'>{{k.maior_duty}}</span>
                        <span>{{k.ending_title}}</span>
                      </p>
                    </li>

                </template>

                <li v-else>
                    <span style="margin-left: -0.44rem;">-</span>
                </li>
              </ul> 
            </div>
        </section>

        <!-- 第三个区域 工作经历结束 -->



        <!-- 第四个区域 家庭成员及主要社会关系 开始 -->

        <section class="family">
          <h2 class="family-title">
            家庭成员及主要社会关系
          </h2>
          <ul class="family-content">
            <template v-if="res.relation && res.relation.length>0">
                <li  v-for='k in res.relation'>
                  <p>
                    <span>{{k.name}}</span>
                    <span>{{k.relationship}}</span>
                    <span>{{k.phone}}</span>
                </p>
                <p>
                    <span>{{k.school_descr}}</span>
                    <span>{{k.occupation}}</span>
                </p>
                </li>

            </template>

            <li v-else>
                <span>-</span>
            </li>            
          </ul>
        </section>

        <!-- 第四个区域 家庭成员及主要社会关系 结束 -->
        
        <!-- 第四个区域 所获证书 开始 -->
        <section class="certificate">
          <h2 class="certificate-title">所获证书</h2>
           <ul class="certificate-content">
             <template v-if="res.certificate && res.certificate.length>0">
                  <li  v-for='k in res.certificate'>
                    <p>{{k.certificate}}</p>
                    <p>
                      <span>{{k.cert_grade}}</span>
                      <span>{{k.issue_date | retsetTime}}</span>
                      <span>{{k.issue_authority}}</span>
                    </p>
                  </li>
             </template>

            <li v-else>
                <span>-</span>
            </li>  
          </ul>
        </section>
        <!-- 第四个区域 所获证书 结束 -->


    </div>
</template>

<script>
export default {
  mounted() {
    // let emplid = window.location.search.split("=")[1];
    let emplid = localStorage.getItem('per_em');
    this.Axios
        .Post(this.URL.resumeForm.url, { emplid: emplid })
        .then(response => {
          console.log(response.data.datas);
          this.res = response.data.datas;
          this.$emit('loadEnd');
        });
  },
  data() {
    return {
      res: "",

    };
  },
  created:function(){

  },
  filters: {
    retsetTime(value) {
      let result = value.split(' ')[0]
      return result
    }
  },  
  computed:{
      srcImg : function(){
          if (!this.res) {
            return;
          }
          return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + this.res.info[0].emplid + '&sex=' +(this.res.info[0].sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
              
      },
  }
};
</script>

<style scoped lang='less'>
.wrap {
  width: 100%;
  font-size: 14/50rem;
  background-color: #fff;
  padding-top:0.8rem;
  .background {
    width: 100%;
    height: 80/50rem;
    background: url("/static/imgs/resume/bg.png") no-repeat center center /100% 100%;
  }

  .main {
    width: 100%;

    .main-title {
      width: 100%;
      border-bottom: 1/50rem solid #f1f1f1;
      img {
        width: 70/50rem;
        height: 70/50rem;
        position: relative;
        left: 50%;
        top: 0;
        margin-left: -35/50rem;
        margin-top: -35/50rem;
        border-radius: 50%;
      }

      h1 {
        text-align: center;
        font-size: 24/50rem;
        padding: 18/50rem 0;
      }
      p {
        width: 75%;
        margin: 0 auto;
        display: flex;
      }
      p:first-of-type {
        justify-content: space-around;
      }
      p:nth-of-type(2) {
        padding: 10/50rem;
        justify-content: center;
        span:nth-of-type(2) {
          margin-left: 16/50rem;
        }
      }
    }

    .main-content {
      padding-bottom: 20rem/50;
      p {
        display: flex;
        padding-top: 10rem/50;
        span:first-of-type {
          flex: 2;
          text-align: right;
          color: #999999;
        }
        span:last-of-type {
          flex: 7;
          padding-left: 20px;
        }
      }
    }
  }

  .education,
  .work,
  .family,
  .certificate {
    width: 100%;
    .education-title,
    .work-title,
    .family-title,
    .certificate-title {
      background-color: #f3f3f3;
      padding: 14/50rem 0 12/50rem 12/50rem;
      color: gray;
      font-weight: normal;
    }
    .education-content,
    .work-content{
      background-color: #fff;
      ul {
        padding-bottom: 16/50rem;
        li {
          padding: 16/50rem 0 0 40/50rem;
          h2 {
            padding: 8/50rem 0;
            font-weight: 500;
            position: relative;
            &::before {
              content: "";
              width: 12/50rem;
              height: 12/50rem;
              background: #ccc;
              border-radius: 50%;
              position: absolute;
              left: -22/50rem;
              top: 50%;
              margin-top: -6rem/50;
            }
          }
          p {
            padding: 8/50rem 0;
          }
          p:last-of-type {
            span:first-of-type {
              margin-right: 12/50rem;
            }
          }
        }
      }
    }
  }

  .family,
  .certificate {
    .family-content,
    .certificate-content {
      padding-bottom: 8rem/50;
      >li {
        padding:16/50rem 0 0 16rem/50;
        p {
          padding-bottom: 14/50rem;
        }
        p:first-of-type {
          span {
            margin-right: 12/50rem;
          }
        }
      }
    }
    .certificate-content {
      p:last-of-type {
          span {
            margin-right: 12/50rem;
          }
        }
    }
  }
}
</style>